<template>
  <div>
    <div>
      <span v-for="time in selectedTime" :key="time.id" style="postion:relative">
       
   <van-button @click="onSelectTime(time)" type="default" class="select">{{time.text}}</van-button>

   <b @click="onSelectTime(time)" class="close">x</b>
   </span>

    </div>
   <h4>借款期限</h4>
   <span v-for="time in list.time" :key="time.text">
   <van-button @click="onSelectTime(time)" :type="time.active?'danger':'default'" class="select">{{time.text}}</van-button>
   </span>

    <h4>年回报率</h4>
<span v-for="rate in list.rate" :key="rate.id">
   <van-button @click="onSelectRate(rate)"  :type="rate.active?'danger':'default'" class="select">{{rate.text}}</van-button>
   </span>

    <h4>还款方式</h4>
    <h4>风险等级</h4>
    <h4>借款金额</h4>
    <van-goods-action>
 <van-goods-action-button
    type="type"
    text="重置"
    @click="onReset"
  />
  <van-goods-action-button
    type="danger"
    text="立即出售"
    @click="onSale"
  />
</van-goods-action>
  </div>
</template>
<script>
import Vue from 'vue';
import { Tag } from 'vant';

Vue.use(Tag);
export default{
  data(){
   return {
    list:{},
     selectedTime:[]
   }
  },
  created(){
    this.list=this.$store.state.list;
    console.log('this.$store.state.list',this.$store.state.list);
  },
   methods: {
     onReset(){},
     onSale(){},
     onSelectTime(time){
        time.active=!time.active;
       this.selectedTime= this.list.time.filter((item)=>{
          return item.active;
       });
       console.log('this.selecttime',this.selectedTime);
     },
     onSelectRate(rate){
       rate.active=!rate.active;
     }
  },
}
</script>

<style>
.select{
  margin-left:10px;
}

.close{
  position: absolute;
  top:0px;
  right:-10px;
}
</style>